<template>
	<div class="sidebar-container" :class="{ 'is-collapse': isCollapse }">
		<el-menu :default-active="activeMenu" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9"
			active-text-color="#409EFF" unique-opened router>
			<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
		</el-menu>
	</div>
</template>

<script>
	import SidebarItem from './SidebarItem.vue';

	export default {
		components: {
			SidebarItem
		},
		props: {
			isCollapse: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				routes: [{
						path: '/home',
						meta: {
							title: '首页',
							icon: 'el-icon-s-home'
						}
					},
					{
						path: '/resident',
						meta: {
							title: '居民模块',
							icon: 'el-icon-user'
						},
						children: [{
								path: 'residentList',
								meta: {
									title: '居民列表'
								}
							},
							{
								path: 'residentHealthFiles',
								meta: {
									title: '居民健康档案'
								}
							},
							{
								path: 'residentHealthData',
								meta: {
									title: '居民健康数据'
								}
							},
							{
								path: 'residentHealthRemind',
								meta: {
									title: '居民健康提醒'
								}
							}
						]
					},
					{
						path: '/doctor',
						meta: {
							title: '医生模块',
							icon: 'el-icon-user-solid'
						},
						children: [{
								path: 'doctorInfo',
								meta: {
									title: '医生信息'
								}
							},
							{
								path: 'onlineConsultation',
								meta: {
									title: '在线问诊'
								}
							},
							{
								path: 'healthGuidance',
								meta: {
									title: '健康指导'
								}
							},
							{
								path: 'PrescriptionIssuance',
								meta: {
									title: '处方开具'
								}
							}
						]
					},
					{
						path: '/system',
						meta: {
							title: '管理后台',
							icon: 'el-icon-setting'
						},
						children: [{
								path: 'userManagement',
								meta: {
									title: '用户管理'
								}
							},
							{
								path: 'doctorManagement',
								meta: {
									title: '医生管理'
								}
							},
							{
								path: 'healthDataStatisticalAnalysis',
								meta: {
									title: '健康数据统计分析'
								}
							}
						]
					}
				]
			}
		},
		computed: {
			activeMenu() {
				const route = this.$route
				const {
					meta,
					path
				} = route
				if (meta.activeMenu) {
					return meta.activeMenu
				}
				return path
			}
		}
	}
</script>

<style scoped>
	.sidebar-container {
		width: 200px;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
		background-color: #304156;
		transition: width 0.28s;
	}

	.sidebar-container.is-collapse {
		width: 64px;
	}

	.el-menu {
		border-right: none;
		height: 100%;
	}
</style>